<template>
  <div style="height: 100vh; position: relative;">
    <n-layout position="absolute">
      <n-layout-header style="height: 64px" bordered>
        <div
          style="
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #0076b8;
          "
        >
          <a href="https://cn.vuejs.org/">
            <img
              src="../assets/imgs/vue.svg"
              alt=""
              style="margin-left: 20px"
            />
          </a>
          <div style="color:white">
            <h1>Echarts Demo</h1>
          </div>
          <div style="margin-right: 20px">
            <n-tooltip trigger="hover">
              <template #trigger>
                <n-icon size="30" color="white">
                  <LogOutOutline @click="logout" />
                </n-icon>
              </template>
              退出登录
            </n-tooltip>
          </div>
        </div>
      </n-layout-header>
      <n-layout has-sider position="absolute" style="top: 64px; bottom: 0;">
        <n-layout-sider
          bordered
          collapse-mode="width"
          :collapsed-width="64"
          :width="240"
          :collapsed="collapsed"
          show-trigger
          @collapse="collapsed = true"
          @expand="collapsed = false"
        >
          <n-menu
            :collapsed="collapsed"
            :collapsed-width="64"
            :collapsed-icon-size="22"
            :options="MenuOption"
            :expand-icon="expandIcon"
            default-value="homePage"
          />
        </n-layout-sider>
        <n-layout content-style="padding: 24px;">
          <router-view />
        </n-layout>
      </n-layout>
    </n-layout>
  </div>
</template>

<script setup>
import {
  HomeOutline,
  CaretDownOutline,
  PeopleOutline,
  AlbumsOutline,
  LogOutOutline,
} from "@vicons/ionicons5";
import { NIcon } from "naive-ui";
import { RouterLink } from "vue-router";

import { useRouter } from "vue-router";

const router = useRouter();

// 退出登录
const logout = () => {
  console.log("logout");
  var storage = window.localStorage;
  storage.clear();
  router.replace("/login");
};

/* 
    侧边菜单栏
*/

const collapsed = ref(true);

function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) });
}

const MenuOption = [
  {
    // 路由 path 对应 @/router/index.js 内容中的 path 字段，其实也可以用 name 字段
    label: () =>
      h(
        RouterLink,
        {
          to: {
            path: "/home",
          },
        },
        { default: () => "系统首页" }
      ),
    key: "homePage",
    icon: renderIcon(HomeOutline),
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            path: "/user",
          },
        },
        { default: () => "用户" }
      ),
    key: "userPage",
    disabled: false,
    icon: renderIcon(PeopleOutline),
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            path: "/files",
          },
        },
        { default: () => "文件" }
      ),
    key: "filesPage",
    disabled: false,
    icon: renderIcon(AlbumsOutline),
  },
];

function expandIcon() {
  return h(NIcon, null, { default: () => h(CaretDownOutline) });
}
</script>

<style lang="less" scoped>
.chart {
  height: 400px;
  width: 420px;
  background-color: white;
}

.cont > div {
  border: 1px solid black;
  margin: 10px;
}

.n-layout{
  background-color: #f0f0f0;
}
</style>
